//  确认剪裁区 剪裁的比例  跟以前插件 eacher 有点像
let image = $('#image');
// 设置剪裁项(大小比例 预览区)
let option = {
    // 剪裁比例
    aspectRatio: 1,
  // 指定预览区
  preview: '.img-preview'
}
// 调用一下 cropper方法，实现初始的效果
image.cropper(option);

//   点击(上传)按钮 就是触发(选择文件)按钮事件   
$('button:contains("上传")').on('click',function(){
  $('#file').trigger('click')
});
// $('button:contains("上传")').on('click', function () {
//     $('#file').trigger('click');
//   })
  
// 选择需要的图片(不一定是默认这张,需要换)是一个事件  选好要提交
$('#file').on('change',function(){
    // console.dir(this)
    // 选好图片 要创建路径拿到图片 图片是文件 只能用files
    // 有长度就就有选好的图片
    if(this.files.length >0){
// 变量接受文件  数组形式
        let fileObj =this.files[0];
        // 创建路径
        let url = URL.createObjectURL(fileObj);
        // 更换剪裁区的图片 这是内置的
        image.cropper('replace',url)
    }
});

// 点击'确定'--> 裁剪图片--> 转换图片格式-->提交图片
$('button:contains("确定")').on('click',function(e){
    // 阻止默认
   e.preventDefault();
   //    裁剪图片
   let canvas = image.cropper('getCroppedCanvas', { width: 30, height: 30 })
    // 转换图片格式
    let base64 = canvas.toDataURL('image/jpeg', 0.3);
    // console.log(base64) encode
    axios.post('/my/user/avatar', `avatar=${encodeURIComponent(base64)}`).then(res=>{
        let {status,message}= res.data;
        if(status===0){
            layer.msg(message);
            window.parent.getUserInfo();
        }
    })


})
